<!DOCTYPE html>

<html>

<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>生命周期</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="">
</head>

<body>
    <div id="react"> </div>
    <!--准备好一个容器-->
    <!--引入react核心库,核心库必须先引入-->
    <script type="text/javascript" src="./js/react.development.js"></script>
    <!--引入react-dom, 用于支持react操作DOM-->
    <script type="text/javascript" src="./js/react-dom.development.js"></script>
    <!--引入babel,用于将jsx转为js-->
    <script type="text/javascript" src="./js/babel.min.js"></script>

    <script type="text/babel">
        /* 
				1. 初始化阶段: 由ReactDOM.render()触发---初次渲染
									1.	constructor()
									2.	componentWillMount()
                                    3.	render()
                                    
									4.	componentDidMount() =====> 常用
                                                    一般在这个钩子中做一些初始化的事，例如：开启定时器、发送网络请求、订阅消息
                                                    
				2. 更新阶段: 由组件内部this.setSate()或父组件render触发
									1.	shouldComponentUpdate()
									2.	componentWillUpdate()
									3.	render() =====> 必须使用的一个
									4.	componentDidUpdate()
                3. 卸载组件: 由ReactDOM.unmountComponentAtNode()触发
                
									1.	componentWillUnmount()  =====> 常用
													一般在这个钩子中做一些收尾的事，例如：关闭定时器、取消订阅消息
		*/


       //父组件
        class A extends React.Component {

            //初始化状态
            state={car:"宝马"} 

            //自定义的赋值函数
            changeCar=()=>{
                let {car} =this.state
                this.setState({car:"奔驰"})
            }
             render() {
                return(
                    <div>
                       <h2>我是父组件A:{this.state.car}</h2>  
                       <button onClick={this.changeCar}>换车</button>              
                        <B car={this.state.car} />
                    </div>
                )
             }
            }  

      //子组件
      class B extends React.Component {

         //组件将要接收新的props的钩子
         componentWillReceiveProps(props){
				console.log('B---componentWillReceiveProps',props);
        }
        
        //控制组件更新的“阀门”
			shouldComponentUpdate(){
				console.log('B---控制组件更新的“阀门”');
				return true
			}
			//组件将要更新的钩子
			componentWillUpdate(){
				console.log('B---组件将要更新');
			}

			//组件更新完毕的钩子
			componentDidUpdate(){
				console.log('B---组件更新完毕');
			}

            render() {
                console.log("render")
            return(
                <div>
                   <h2>我是B组件我接收A组件换的车:{this.props.car}</h2>
                </div>
            )
            }
        } 
         ReactDOM.render(<A/>, document.getElementById("react"));
    </script>

</body>

</html>